<script setup lang="ts">
import Task from '@/components/Task.vue';
import { ref } from 'vue';

const count = ref(30);
</script>

<template>
  <div class="today">
    <div class="header">
      <h1 class="title">今天</h1>
      <p>{{ count }} 个</p>
    </div>
    <Task v-for="i in count" :key="i" />
  </div>
</template>

<style scoped>
.today {
  --padding-top: 100px;
  position: relative;
  height: 100%;
  overflow-y: auto;
}

.today .header {
  top: 0;
  padding-left: 32px;
  position: sticky;
  z-index: 1;
  background-color: var(--background-color);
  opacity: 0.8;

  backdrop-filter: blur(10px);
}

.today .header .title {
  color: var(--primary-color);
}

.today .header .title,
.today .header p {
  margin: 0;
}
</style>
